<template>
  <div>
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="120px"
    >
      <el-form-item label="统计类型" prop="reportItemId">
        <el-select
          v-model="queryParams.reportItemId"
          placeholder="请选择统计类型"
          style="width: 100%"
        >
          <el-option
            v-for="item in reportItems"
            :key="item.id"
            :label="item.typeName + '[' + item.itemName + ']'"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="统计项" prop="valueType">
        <el-select
          v-model="valueType"
          placeholder="请选择统计项"
          style="width: 100%"
        >
          <el-option
            v-for="item in valueTypeOption"
            :key="item.fcode"
            :label="item.fcontent"
            :value="item.fcode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="统计开始月">
        <el-date-picker
          v-model="queryParams.beginMonth"
          type="month"
          placeholder="选择月"
          format="yyyy-MM"
          value-format="yyyy-MM"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="统计结束月">
        <el-date-picker
          v-model="queryParams.endMonth"
          type="month"
          placeholder="选择月"
          format="yyyy-MM"
          value-format="yyyy-MM"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-s-data"
          size="mini"
          @click="handleReport"
          >统计</el-button
        >
      </el-form-item>
    </el-form>
    <div id="main" style="width: 100%; height: 400px" v-if="!nodata"></div>
    <div id="none-data" style="width: 100%; height: 400px" v-if="nodata"></div>
  </div>
</template>

<script>
import {
  getMonthReportConfig,
  getMonthCompareReport,
} from "@/api/report/basic";
var myChart;

export default {
  name: "monthcompare",
  data() {
    return {
      loading: false,
      nodata:false,
      tableData: [],
      reportItems: [],
      dateRange: [],
      valueType: "",
      valueTypeOption:[ {fcode:"receiveNum",fcontent:"数量"},
                   {fcode:"dataSize",fcontent:"数据量"}
      ],
      queryParams: {
        reportItemId: "",
        beginMonth: "",
        endMonth: "",
      },
      option: {
              title: {
                text: "分发月份",
              },
              tooltip: {},
              legend: {
                data: ["统计值"],
              },
              xAxis: {
                data: [],
                axisLabel:{
                    		interval: 0,
                    		rotate:0
                    	}
              },
              yAxis: {},
              series: [
                {
                  name: "统计值",
                  type: "bar",
                  data: [],
                  animationDelay: function(idx) {
                  						return idx * 10 + 1000;
                  },
            barWidth : 60,
            itemStyle: {
            normal: {
                // 随机显示
                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
              
                // 定制显示（按顺序）
                color: function(params) { 
                    var colorList = [ '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',

                               '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',

                               '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0' ]; 
                    return colorList[params.dataIndex] 
                },
                label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: { //数值样式
										color: 'black',
										fontSize: 16
									}
								},
            },
        },
                },
              ],
            }
    };
  },
  mounted() {
    console.log("月度对比！");
    this.iniConfigList();
  },
  methods: {
    handleReport() {
      getMonthCompareReport(this.queryParams).then((response) => {
        this.tableData = response.rows;
        this.refreshchart();
      });
    },
    iniConfigList() {
      if (this.reportItems.length <= 0) {
        getMonthReportConfig().then((response) => {
          this.reportItems = response.rows;
          this.queryParams.reportItemId = "1";
          this.valueType = "receiveNum";
          
          var nowDate = new Date();
          var y = nowDate.getFullYear();
          var m = nowDate.getMonth()+1;
          var d = nowDate.getDate();
          if (m >= 1 && m <= 9) {
              m = "0" + month;
          }
          this.queryParams.beginMonth = y + "-01";
          this.queryParams.endMonth = y + "-" + m;

          this.refreshchart();
        });
      }
    },
    refreshchart() {
      // 基于准备好的dom，初始化echarts实例
      myChart = this.$echarts.init(document.getElementById("main"));
      this.option.title.text = "月度分发情况对比";
      this.option.series[0].name = "分发数量";
      this.option.xAxis.data = [];
      this.option.series[0].data = [];
      this.nodata = !(this.tableData.length>0);
      for (var i = 0;i < this.tableData.length && this.option.series[0].data.length <= 20;i++) {
        this.option.xAxis.data.push(this.tableData[i].yearMonth);
        this.option.series[0].data.push(this.tableData[i][this.valueType]);
      }
      myChart.setOption(this.option);
      setTimeout(function () {
        myChart.resize();
      }, 100);
    },
    getReportData(queryParam) {
      this.loading = true;
      var condition = {};
      if (queryParam) {
        condition.beginTime = queryParam.beginTime;
        condition.endTime = queryParam.endTime;
        hotProjectReport(condition).then((response) => {
          this.tableData1_5 = response.rows;
          this.total = response.total;
          this.myEcharts();
          this.loading = false;
        });
      } else {
        this.tableData1_5 = [];
        this.loading = false;
      }
    },
  },
};
</script>
